import React, { useState } from 'react';
import './yundong.css';
import axios from 'axios';
import { LeftOutline, RightOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";

function y_shen() {
    const navigate = useNavigate();
    const [stepValue, setStepValue] = useState(30);

    const handleChange = (e) => {
        const rawValue = parseInt(e.target.value);
        const roundedValue = Math.round(rawValue / 5) * 5;
        setStepValue(roundedValue);
    };

    const totalSeconds = stepValue * 10;
    const totalMinutes = Math.floor(totalSeconds / 60);
    const remainingSeconds = totalSeconds % 60;
    const totalHours = Math.floor(totalMinutes / 60);
    const remainingMinutes = totalMinutes % 60;
    const formattedTime = totalHours > 0
        ? `${totalHours} 小时 ${remainingMinutes} 分钟`
        : `${totalMinutes} 分钟 ${remainingSeconds} 秒`;

   const add = async () =>{
        try{
            let data = await axios.post('http://127.0.0.1:3000/qjx_shens_add',{stepValue})
            if(data.data.code == 200){
               navigate('/yundong')
            }else{
                alert(data.data.msg)
            }
        }catch(err){
            console.log(err)
        }
   }

    return (
        <div>
            <div className='y_one'> {/* 修正类名拼写 */}
                <p style={{
                    marginTop: '3px'
                }} onClick={() => navigate('/yundong')}><LeftOutline fontSize={24} /></p>
                <h2>深蹲目标</h2>
            </div>
            <div className='f_two'>
                <p className='f_one'>{stepValue} 个</p>
                <p className='f_three'>预计消耗时间: {formattedTime}</p>
                <div className='f_f'>
                    {/* <p>{stepValue}个</p> */}
                </div>
                <input
                    type="range"
                    min="10"
                    max="100"
                    value={stepValue}
                    onChange={handleChange}
                /><br></br>
                <button onClick={add} className='f_bao'>保存</button> {/* 修正 onClick 绑定方式 */}
            </div>
        </div>
    );
}

export default y_shen;